<template>
  <div class="box">
    <header class="header">
      <van-nav-bar title="我的收藏" left-arrow  @click-left="$router.go(-1)">
      </van-nav-bar>
    </header>
    <div class="content">
      <div class="collect">
        <van-card
        v-for="(item, index) of collectionlist" :key="index"
          :price="item.price"
          :title="item.proname"
          :thumb="item.proimg"
          @click="toDetail(item.proid)"
        >
          <template #tags>
            <van-tag plain type="danger">满减</van-tag>
            <van-tag plain type="danger">特价</van-tag>
          </template>
        </van-card>
      </div>
      <h1>为你推荐</h1>
      <Prolist :prolist="prolist" ></Prolist>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { NavBar, Toast, Card, Tag } from 'vant'
import { getCollection, getProlist } from '@/api'
import Prolist from '@/components/prolist'
Vue.use(NavBar)
Vue.use(Card)
Vue.use(Tag)
export default {
  components: {
    Prolist
  },
  data () {
    return {
      collectionlist: [],
      prolist: []
    }
  },
  mounted () {
    getProlist().then(res => {
      console.log(res.data)
      this.prolist = res.data.data
    })
    const collection = localStorage.getItem('collection')
    if (!collection || JSON.parse(collection).length === 0) {
      Toast('您还未收藏任何的产品')
      return
    }
    getCollection({
      token: localStorage.getItem('token'),
      collectionData: localStorage.getItem('collection')
    }).then(res => {
      if (res.data.code === '10119') {
        this.$router.push('/login')
      } else {
        this.collectionlist = res.data.data
        console.log(res.data.data)
      }
    })
  },
  methods: {
    toDetail (proid) {
      console.log(proid)
      // this.$router.push('/detail/' + proid)
      // this.$router.push({ name: 'detail', params: { proid } })
      this.$router.push({ path: '/detail/' + proid })
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  background-color:rgb(244, 244, 244);
  padding: 2px;
  h1 {
    height: 62px;
    line-height: 62px;
    text-align: center;
    font-size: 15px;
  }
}
.van-search {
  padding: 5px 12px;
}
.van-nav-bar__title {
  max-width: 80%;
}
.van-card {
  background-color: white;
  margin-top: 1px;
  .van-card__price-currency {
    color: rgb(191, 17, 17);
  }
  .van-card__price-integer {
    color: rgb(191, 17, 17);
  }
  .van-tag  {
    color:white;
    background-color:rgb(217, 107, 108) ;
    margin-right: 3px;
  }
  .van-card__title {
    font-size: 15px;
    margin-bottom: 5px;
  }
}
</style>
